import React, { Component } from 'react';
import {
	StyleSheet, Text, View, PixelRatio, TouchableOpacity
} from "react-native";
import { GLOBAL } from '../../../config/global';
import { style } from '../../../theme/style';
import { cStyles } from '../RequirementStyle.js'

const scale = GLOBAL.SCALE;

/**
 * 灰色背景的标题
 * @param {object} props text
 */
export function RequirementTitle (props) {
	const { text } = props;
	return (
		<View style={styles.titleCell}>
			<Text style={cStyles.text}>{text}</Text>
		</View>
	);
}

/**
 * 底部细线、左右flex的row
 * @param {object} props children, text 
 */
export function InputRow (props) {
	const { children, text } = props;
	return (
		<View style={styles.inputRow}>
			<View style={styles.inputRowLeft}>
				<Text style={cStyles.text}>{text}</Text>
			</View>
			<View style={styles.inputRowRight}>
				{children}
			</View>
		</View>
	);
}

/**
 * 灰色按钮，current时主题色
 * @param {object} props onPress, text, isCurrent, id
 */
export function RowBtn (props) {
	const { onPress, text, isCurrent, id, style } = props;
	const rowBtnText = isCurrent ? styles.rowBtnCurText : styles.rowBtnText;
	const rowBtn = isCurrent ? [styles.rowBtn, styles.rowBtnCur] : styles.rowBtn;
	return (
		<TouchableOpacity onPress={() => { onPress(id); }} activeOpacity={0.5} style={[rowBtn, { ...style }]}>
			<Text style={rowBtnText}>{text}</Text>
		</TouchableOpacity>
	);
}

/**
 * 大按钮
 * @param {object} props onPress, text
 */
export function LargeBtn (props) {
	const { onPress, text } = props;
	return (
		<View style={styles.largeBtnCell}>
			<TouchableOpacity onPress={onPress} activeOpacity={0.5} style={styles.largeBtn}>
				<Text style={styles.largeBtnText}>{text}</Text>
			</TouchableOpacity>
		</View>
	);
}

const styles = StyleSheet.create({
	largeBtnCell: {
		width: 375 * scale,
		height: 77 * scale,
		justifyContent: 'center',
		alignItems: 'center',
	},
	largeBtn: {
		width: 351 * scale,
		height: 44 * scale,
		backgroundColor: style.color.themeColor,
		borderRadius: 40,
		justifyContent: 'center',
		alignItems: 'center',
	},
	largeBtnText: {
		fontSize: 18 * scale,
		color: '#fff'
	},
	rowBtn: {
		backgroundColor: '#ddd',
		justifyContent: 'center',
		alignItems: 'center',
		borderRadius: 4,
		width: 97 * scale,
		height: 27 * scale,
		marginRight: 8 * scale,
	},
	rowBtnText: {
		fontSize: 12 * scale,
		color: '#8B8B8B',
	},
	rowBtnCur: {
		backgroundColor: style.color.themeColor,
	},
	rowBtnCurText: {
		fontSize: 12 * scale,
		color: '#fff',
	},
	inputRow: {
		borderBottomColor: '#e4e4e4',
		borderBottomWidth: 1 / PixelRatio.get(),
		flexDirection: 'row',
	},
	inputRowLeft: {
		width: 100 * scale,
		height: 50 * scale,
		justifyContent: 'center',
	},
	inputRowRight: {
		flex: 1,
		// backgroundColor: 'aliceblue',
		// flexDirection: 'row',
		// justifyContent: 'space-between',
		// alignItems: 'center',
	},
	titleCell: {
		width: 375 * scale,
		height: 30 * scale,
		paddingLeft: 14 * scale,
		justifyContent: 'center',
		backgroundColor: '#F6F6F6',
	}
});